<div class="container-fluid" id = "main">
   <div class="row">
	<div id = "equalheight">		
        <div  class="col-s-5 col-md-3 sidebar align jumbotron">
		<div id = "firstCol">
          <ul class="nav nav-sidebar">
            <Module><ModulePrefs title="Time and Date" title_url="http://goo.gl/IF6R3" description="This Gadget includes lots of information that is time and date related" author="time and date ,time and date calendar ,time and date calculator ,time and date countdown ,time and date in india ,time and date in australia ,time and date duration ,time and date meeting planner ,time and date in china ,time and date of royal wedding " author_email="kairoumi1@gmail.com" height="260" width="468" thumbnail="http://img11.hostingpics.net/pics/356580201107231126.png" screenshot="http://img11.hostingpics.net/pics/356580201107231126.png" category="tools" category2="technology" scaling="false"/>
			<Content  type="html" style = "width: 350">
			<embed id="clock-background" src="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-59.swf" wmode="transparent" height="100" width="250"></object>
			</Content></Module>
            
				<div>
				<button id = "person" style="width: 250px" class="btn btn-primary" data-toggle="modal" data-target="#personModal">Find By Contact(s)</button>
				<div id = "personModal" class="modal fade bs-example-modal-lg" tabindex="-2" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
				<div class="modal-dialog modal-lg">
				<div class="modal-content" >
					<form action = "" method="get" id = "byUserName">
					   <b>Username</b>
					   <input type = "text" name = "username" value = "pflieged@onid.oregonstate.edu putnamj@onid.oregonstate.edu reyesda@onid.oregonstate.edu rebecca.adler@oregonstate.edu"
					   style = "width: 350px"><br>
					   <b>Query Start</b>
					   <input id="datetimepicker" type="text" name = "startTime" 
					   style = "width: 350px"><br>
					   <b>Query End</b>
					   <input id="datetimepicker_endTime" type = "text" name = "endTime" 
					   style = "width: 350px"><br>
					   <input type = "submit" value = "Submit">
					</form> 			   
				</div>
				</div>
				</div>
				</div>
			
            
			<li><div>
				<button id = "group" style="width: 250px" class="btn btn-primary" data-toggle="modal" data-target="#groupModal">Find By Group / Department</button>
				<div id = "groupModal" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
				<div class="modal-dialog modal-sm">
				<div class="modal-content">
					<form action="?" method="get" id = "byUserGroup">
					   <b>Groupname</b>
					   <input type = "text" name = "username" value = "pflieged@onid.oregonstate.edu"
					   style = "width: 350px"><br>					   
						<div  class ="padding">
							<div class = "scrollInfoSheet" >
							<?php				
								printAllDepartments();					
							?>
							</div>
						</div>
						 <input class = "submit" type = "submit" value = "Submit">	   
					   
					</form> 			   
				</div>
				</div>
				</div>
				</div>
            </li>
			<li>
			<button style="width: 250px" class="btn btn-primary" data-toggle="modal" data-target="#timeModal">Find By Time</button>
				<div  id = "timeModal" class="modal fade bs-example-modal-lg" tabindex="0" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
				<div class="modal-dialog modal-lg">
				<div class="modal-content">
					<form action="?" method="get" id = "byGroup" >
					   <b>Query Start</b>
					   <input id = "datetimepicker2" type = "text" name = "startTime" 
					   style = "width: 350px"><br>
					   <b>Query End</b>
					   <input id = "datetimepicker_endTime2" type = "text" name = "endTime" 
					   style = "width: 350px"><br>	
					   <input type = "hidden" name = "username" value = "<?php echo $_GET['username']; ?>" >
					   <input type = "submit" value = "Submit">
					</form> 			   
				</div>
				</div>
				</div>		
			</li>
			
          </ul>
			<div> 
				<script 
				src="//www.gmodules.com/ig/ifr?url=http://templatz.co/calendar/simple-plain-calendar.xml&amp;
				synd=open&amp;
				w=200&amp;
				h=200&amp;
				title=View+of+the+Month&amp;
				border=%23ffffff%7C3px%2C3px+solid+%23999999&amp;			
				output=js">
				</script>
			</div>
         </div>
		</div>